﻿@page "/tree-grid/virtual-scrolling"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.TreeGrid
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@*Hidden:Lines*@
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_virtualdata
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid component with the vertical scrollbar to view the exceeded Tree Grid content.</p>
</SampleDescription>
<ActionDescription>
    <p>The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. Tree Grid supports only row virtualization. To enable row virtualization, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableVirtualization'>EnableVirtualization</a></code> property as true.</p>
    <p>In this demo, Tree Grid is rendered with row virtualization. Tree Grid is bound with 10,000 rows.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            @{
                if (Data)
                {
                    <span id="initialload" class="topload">Loading 10,000 Rows</span>
                    <div class="loading">
                        <span id="spancontrol" class="visible">Generating Data </span>
                        <img src="@UriHelper.ToAbsoluteUri($"images/data-grid/spinner.gif")" />
                    </div>
                }
                else
                {
                    <span id="afterload" class="topload">Loaded 10,000 Rows</span>
                }
            }
            <SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskID" TreeColumnIndex="1" ParentIdMapping="ParentID" Height="430" Width="auto" EnableHover="false" EnableVirtualization="true">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Jersey No" TextAlign="TextAlign.Right" Width="90"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD1" HeaderText="Player Name" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD2" HeaderText="Year" TextAlign="TextAlign.Right" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD3" HeaderText="Stint" TextAlign="TextAlign.Right" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD4" HeaderText="TMID" TextAlign="TextAlign.Right" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD5" HeaderText="LGID" TextAlign="TextAlign.Right" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="FIELD6" HeaderText="GP" TextAlign="TextAlign.Right" Width="80"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>


<style>
    .visible {
        display: inline-block;
        font-size: 18px;
        color: rgba(0,0,0,1);
    }

    .loading {
        position: absolute;
        height: 92%;
        width: 100%;
        background-color: rgba(1,1,1,0.2);
        z-index: 10000;
        display: flex;
        align-items: center;
        padding-left: 44%;
    }

    .topload {
        font-size: 15px;
    }
</style>
@code{

    public List<VirtualData> TreeGridData { get; set; } = new List<VirtualData>();

    public Boolean Data = true;

    protected override void OnInitialized()
    {
        TreeGridData = VirtualData.GetTreeVirtualData();
        Data = false;
    }


}